.container {
	display: block;
	margin: 0 auto;
	max-width: 70em;
	padding: 0 3rem;
	@include clearfix;
}

.header {
	background: $color-white;
	padding: 0 0;
}

.logo {
	float: left;
	font-size: 1.8rem;
	font-weight: 600;
	margin: 0;
	line-height: 1;
}

.nav {
	float: right;

	a {
		@extend .logo;
	}
}

.content {
	background: #fafafa;;
	padding: 1rem 0 0;
	margin-bottom: 31.24rem;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;

	@media (min-width: $breakpoint-medium) {
		padding: 5rem 0 0;
		margin-bottom: 23.42rem;
	}
}

.intro,
.projects {
	padding: 0 0 2rem;
}

.intro {
	@media (min-width: $breakpoint-medium) {
		p {
			font-size: 2.7rem;
			max-width: 66.66666%;
		}
	}
}

.projects-list-bigdata {
	padding: 1rem 1rem;
	border: 2px solid lightblue;
	background: white;
	@include clearfix;

	li {
		margin-bottom: 1rem;
		margin-right: 2rem;
		width: 120px;
		float: left;
		display: block;
		text-align: center;
		border: 1px solid;

		&:last-child {
			margin-bottom: 0;
		}
	}

	a {
		&:hover {
			.img-wrapper {
				&:before {
					opacity: 1;
				}
				&:after {
					opacity: .45;
				}
			}
		}
	}

	.img-wrapper {
		position: relative;

		&:before {
			content: "View Details";
			color: $color-white;
			@extend .h2;
			font-weight: 800;
			position: absolute;
			top: 50%;
			left: 40%;
			margin-top: -.5rem;
			margin-left: -4.4rem;
			opacity: 0;
			-webkit-transition: all .5s ease-in-out;
    		transition: all .5s ease-in-out;
    		-webkit-transition-delay: .25s;
    		transition-delay: .25s;
    		z-index: 2;
		}

		&:after {
			background: #000;
			content: "";
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			opacity: 0;
			-webkit-transition: all .5s ease-in-out;
    		transition: all .5s ease-in-out;
    		z-index: 1;
		}
	}

	h3 {
		@extend .h3;
		font-size: 1.4rem;
                font-weight: 400;
		margin-bottom: 2px;
		padding-top: 2px;
		border-top: 1px solid;	
	}

	img {
			width: 80%;
            margin: 0 auto;
	}
}

.footer {
	background: $color-alabaster;
	bottom: 0;
	left: 0;
	padding: 5rem 0;
	position: fixed;
	right: 0;
	z-index: -1;
}

.contact,
.follow {
	@media (min-width: $breakpoint-medium) {
		float: left;
		margin-bottom: 0;
		width: 33.33333%;
	}
}

.contact,
.follow {
	margin-bottom: 3rem;
}
